<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('个人资料')}"></head>
<body>
    <!-- 导航栏 -->
    <nav th:replace="~{fragments/layout :: navbar}"></nav>
    
    <!-- 页面内容 -->
    <div th:replace="~{fragments/layout :: content(~{::main})}">
        <main>
            <div class="row">
                <!-- 个人资料卡片 -->
                <div class="col-md-4 mb-4">
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            <h4 class="mb-0">个人资料</h4>
                        </div>
                        <div class="card-body">
                            <div class="text-center mb-4">
                                <i class="fas fa-user-circle fa-5x text-primary"></i>
                            </div>
                            <div class="mb-3">
                                <h5 class="card-title" th:text="${user.name}">用户姓名</h5>
                                <p class="card-text text-muted" th:text="${user.username}">用户名</p>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <span>电子邮箱</span>
                                    <span th:text="${user.email}">user@example.com</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <span>用户角色</span>
                                    <span class="badge bg-secondary me-1" th:text="${user.role.name}">STUDENT</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <span>注册时间</span>
                                    <span th:text="${#temporals.format(user.createdAt, 'yyyy-MM-dd')}">2023-01-01</span>
                                </li>
                            </ul>
                        </div>
                        <div class="card-footer">
                            <a class="btn btn-outline-primary w-100" th:href="@{/profile/edit}">
                                <i class="fas fa-edit me-1"></i> 编辑资料
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 借阅统计和信息 -->
                <div class="col-md-8">
                    <div class="card mb-4">
                        <div class="card-header bg-info text-white">
                            <h4 class="mb-0">借阅统计</h4>
                        </div>
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-md-4 mb-3">
                                    <div class="p-3 border rounded">
                                        <h3 class="text-primary" th:text="${currentLoansCount}">0</h3>
                                        <p class="mb-0">当前借阅</p>
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <div class="p-3 border rounded">
                                        <h3 class="text-success" th:text="${totalReturnedCount}">0</h3>
                                        <p class="mb-0">已归还</p>
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <div class="p-3 border rounded">
                                        <h3 class="text-danger" th:text="${overdueCount}">0</h3>
                                        <p class="mb-0">逾期未还</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mt-3">
                                <a th:href="@{/loans/my}" class="btn btn-outline-primary">
                                    <i class="fas fa-list me-1"></i> 查看我的借阅记录
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 修改密码卡片 -->
                    <div class="card">
                        <div class="card-header bg-warning">
                            <h4 class="mb-0">修改密码</h4>
                        </div>
                        <div class="card-body">
                            <form th:action="@{/profile/change-password}" method="post">
                                <div class="mb-3">
                                    <label for="currentPassword" class="form-label">当前密码</label>
                                    <input type="password" class="form-control" id="currentPassword" name="currentPassword" required>
                                </div>
                                <div class="mb-3">
                                    <label for="newPassword" class="form-label">新密码</label>
                                    <input type="password" class="form-control" id="newPassword" name="newPassword" required>
                                    <div class="form-text">密码长度至少为6个字符</div>
                                </div>
                                <div class="mb-3">
                                    <label for="confirmPassword" class="form-label">确认新密码</label>
                                    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
                                </div>
                                <button type="submit" class="btn btn-warning">
                                    <i class="fas fa-key me-1"></i> 修改密码
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <!-- 页脚 -->
    <footer th:replace="~{fragments/layout :: footer}"></footer>
    
    <!-- 脚本 -->
    <div th:replace="~{fragments/layout :: scripts}"></div>
</body>
</html>
